<template>
  <div class="project-detail" v-if="project">
    <button class="back-button" @click="$router.go(-1)">
      <i class="fas fa-arrow-left"></i> 返回项目列表
    </button>

    <div class="detail-header">
      <div class="project-image">
        <img :src="project.image" :alt="project.name">
      </div>
      <div class="project-info">
        <h1>{{ project.name }}</h1>
        <div class="meta-info">
          <span class="category">{{ categoryName }}</span>
          <span class="region">{{ project.region }}</span>
          <span class="level">{{ project.level }}</span>
        </div>
      </div>
    </div>

    <div class="detail-content">
      <div class="content-section">
        <h2>项目简介</h2>
        <p>{{ project.brief }}</p>
      </div>

      <div class="content-section">
        <h2>历史渊源</h2>
        <p>{{ project.history }}</p>
      </div>

      <div class="content-section">
        <h2>艺术特色</h2>
        <p>{{ project.characteristics }}</p>
      </div>

      <div class="content-section">
        <h2>保护现状</h2>
        <p>{{ project.protectionStatus }}</p>
      </div>

      <!-- 图片展示 -->
      <div class="gallery" v-if="project.gallery && project.gallery.length">
        <h2>制作过程展示</h2>
        <div class="gallery-grid">
          <div
              class="gallery-item"
              v-for="(image, index) in project.gallery"
              :key="index"
              @click="openLightbox(index)"
          >
            <img :src="image" :alt="'项目图片-' + index">
          </div>
        </div>
      </div>

      <!-- 视频展示 -->
      <div class="video-section" v-if="project.video">
        <h2>详细视频教学</h2>
        <div class="video-container">
          <video controls>
            <source :src="project.video" type="video/mp4">
            您的浏览器不支持视频播放
          </video>
        </div>
      </div>
    </div>

    <!-- 图片灯箱 -->
    <div class="lightbox" v-if="showLightbox" @click.self="closeLightbox">
      <div class="lightbox-content">
        <button class="close-btn" @click="closeLightbox">
          <i class="fas fa-times"></i>
        </button>
        <img :src="project.gallery[currentImageIndex]" :alt="'项目图片-' + currentImageIndex">
        <button class="nav-btn prev" @click.stop="prevImage">
          <i class="fas fa-chevron-left"></i>
        </button>
        <button class="nav-btn next" @click.stop="nextImage">
          <i class="fas fa-chevron-right"></i>
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, computed, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { fetchProjectDetail } from '@/api/projectApi'

export default {
  name: 'ProjectDetailView',
  setup() {
    const route = useRoute()
    const project = ref(null)
    const loading = ref(true)
    const showLightbox = ref(false)
    const currentImageIndex = ref(0)

    // 分类名称映射
    const categoryMap = {
      'folk-literature': '民间文学',
      'traditional-music': '传统音乐',
      'traditional-dance': '传统舞蹈',
      'traditional-drama': '传统戏剧',
      'quyi': '曲艺',
      'traditional-sports': '传统体育',
      'recreation-acrobatics': '游艺与杂技',
      'traditional-art': '传统美术',
      'traditional-craft': '传统技艺',
      'traditional-medicine': '传统医药',
      'folk-custom': '民俗'
    }

    // 获取当前分类名称
    const categoryName = computed(() => {
      return categoryMap[route.params.categoryId] || route.params.categoryId
    })

    // 图片灯箱控制
    const openLightbox = (index) => {
      currentImageIndex.value = index
      showLightbox.value = true
      document.body.style.overflow = 'hidden'
    }

    const closeLightbox = () => {
      showLightbox.value = false
      document.body.style.overflow = 'auto'
    }

    const prevImage = () => {
      currentImageIndex.value = (currentImageIndex.value - 1 + project.value.gallery.length) % project.value.gallery.length
    }

    const nextImage = () => {
      currentImageIndex.value = (currentImageIndex.value + 1) % project.value.gallery.length
    }
    onMounted(async () => {
      try {
        const data = await fetchProjectDetail(
            route.params.categoryId,
            route.params.projectId
        );

        const baseUrl = 'http://localhost:8089/images/';

        project.value = {
          ...data,
          image: data.image ? `${baseUrl}${data.image}` : '/default-project.jpg',
          gallery: data.gallery
              ? data.gallery.map(img => `${baseUrl}${img}`)
              : [],
          video: data.video || ''
        };

      } catch (error) {
        console.error('加载项目详情失败:', error)
      } finally {
        loading.value = false
      }
    })


    return {
      project,
      loading,
      categoryName,
      showLightbox,
      currentImageIndex,
      openLightbox,
      closeLightbox,
      prevImage,
      nextImage
    }
  }
}
</script>

<style scoped>
.project-detail {
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 60px;
}

.back-button {
  padding: 8px 15px;
  background: #f5f5f5;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-bottom: 20px;
  font-size: 0.9rem;
}

.back-button:hover {
  background: #e0e0e0;
}

.detail-header {
  display: flex;
  gap: 30px;
  margin-bottom: 40px;
}

.project-image {
  flex: 0 0 400px;
  height: 300px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

.project-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-info {
  flex: 1;
}

.project-info h1 {
  margin: 0 0 15px 0;
  font-size: 2rem;
  color: #333;
}

.meta-info {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
}

.meta-info span {
  padding: 4px 10px;
  background: #f0f0f0;
  border-radius: 4px;
  font-size: 0.9rem;
  color: #666;
}

.detail-content {
  margin-top: 40px;
}

.content-section {
  margin-bottom: 40px;
}

.content-section h2 {
  color: #333;
  border-bottom: 2px solid #42b983;
  padding-bottom: 8px;
  margin-bottom: 20px;
}

.content-section p {
  line-height: 1.8;
  color: #555;
}

.gallery {
  margin-top: 50px;
}

.gallery h2 {
  color: #333;
  border-bottom: 2px solid #42b983;
  padding-bottom: 8px;
  margin-bottom: 20px;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 15px;
}

.gallery-item {
  height: 150px;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s;
}

.gallery-item:hover {
  transform: scale(1.03);
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-section {
  margin-top: 50px;
}

.video-section h2 {
  color: #333;
  border-bottom: 2px solid #42b983;
  padding-bottom: 8px;
  margin-bottom: 20px;
}

.video-container video {
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

/* 灯箱样式 */
.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.lightbox-content {
  position: relative;
  max-width: 90%;
  max-height: 90%;
}

.lightbox-content img {
  max-width: 100%;
  max-height: 80vh;
  display: block;
  margin: 0 auto;
}

.close-btn {
  position: absolute;
  top: -40px;
  right: 0;
  background: none;
  border: none;
  color: white;
  font-size: 1.5rem;
  cursor: pointer;
}

.nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.3);
  border: none;
  color: white;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 1.2rem;
  cursor: pointer;
}

.nav-btn.prev {
  left: 20px;
}

.nav-btn.next {
  right: 20px;
}

@media (max-width: 768px) {
  .detail-header {
    flex-direction: column;
  }

  .project-image {
    flex: 0 0 auto;
    height: 250px;
  }
}
</style>